<template>
    <el-dialog v-model="dialogVisible" :title="title" width="600px" destroy-on-close :close-on-click-modal="false">
        <div>
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="230px" class="">
                <el-form-item v-for="(i, index) in formData" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                    <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                        :placeholder="i.placeholder" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { cloneDeep } from 'lodash'
import { ElMessage } from 'element-plus'

import { addAccount, updateAccount } from 'api/tools/manageAccount.ts'
const formRef = ref(null)

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    // 类型: add: 新增   update: 修改
    type: {
        type: String,
        default: 'add'
    },
    // 渠道
    channelId: {
        type: [String, Number]
    },
    curItem: {
        type: Object
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const title = computed(() => {
    return props.type === 'add' ? '新增收款账户' : '修改收款账户'
})

const formDataBase = {
    bankName: {
        label: '收款账户名',
        prop: 'bankName',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    bankNameAbbreviation: {
        label: '收款账户简称',
        prop: 'bankNameAbbreviation',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    openBank: {
        label: '开户行',
        prop: 'openBank',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    bankNo: {
        label: '银行卡号',
        prop: 'bankNo',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    wechatMchId: {
        label: '微信商户号',
        prop: 'wechatMchId',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    wechatMchKey: {
        label: '微信商户号标识',
        prop: 'wechatMchKey',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    apiKey: {
        label: 'apiKey',
        prop: 'apiKey',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    keyPath: {
        label: '证书路径(keyPath)',
        prop: 'keyPath',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    privateCertPath: {
        label: '证书路径(privateCertPath)',
        prop: 'privateCertPath',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
    privateKeyPath: {
        label: '证书路径(privateKeyPath)',
        prop: 'privateKeyPath',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: ''
    },
}

const formData = ref()

formData.value = cloneDeep(formDataBase)

const rules = ref({
    'bankName.value': [
        {
            required: true,
            trigger: 'blur',
            message: '收款账户名不能为空'
        }
    ],
    'openBank.value': [
        {
            required: true,
            trigger: 'blur',
            message: '开户行不能为空'
        }
    ],
    'bankNo.value': [
        {
            required: true,
            trigger: 'blur',
            message: '银行卡号不能为空'
        }
    ],
    'wechatMchId.value': [
        {
            required: true,
            trigger: 'blur',
            message: '微信商户号不能为空'
        }
    ],
})


const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            handleAddAccount(props.type)
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const handleAddAccount = (type) => {
    const data = {
        channelId: props.channelId
    }
    for (const key in formData.value) {
        data[formData.value[key].prop] = formData.value[key].value
    }
    if (type === 'add') {
        addAccount(data).then(res => {
            emits('success')
            ElMessage({
                message: '新增成功',
                type: 'success',
            })
            dialogVisible.value = false
        })
    } else if (type === 'update') {
        data.id = props.curItem.id
        updateAccount(data).then(res => {
            emits('success')
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            dialogVisible.value = false
        })
    }

}

const initForm = () => {
    for (const key in formData.value) {
        formData.value[key].value = ''
    }
}

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval && props.type === 'add') {
        formData.value = cloneDeep(formDataBase)
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})

watch(() => props.curItem, (newval) => {
    if (newval) {
        for (const key in formData.value) {
            formData.value[key].value = newval[key]
        }
    }
}, {
    immediate: true,
    deep: true
})

</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}
</style>